<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>模板语法</title>
</head>
<body>
  <!-- 

    1.el可以通过创建vue实例的时候配置 或 vm.$mount 原型方法设置
    2.data 可以用对象式和函数式两种方式申明,在使用组件时 data必须使用函数式声明
    3.由vue管理的函数不能使用箭头函数,箭头函数中没用this指向,this会获取window对象

   -->
   
  <div id = 'root'>
     <h1>hello, {{name}}</h1>
  </div>
  
  <script type="text/javascript" src="../js/vue.js"></script>
<script>
  // 设置为 false 以阻止 vue 在启动时生成生产提示。
  Vue.config.productionTip = false
  // 创建一个vue实例
  const v = new Vue({
    // el -> element 用于指定当前vue对象绑定哪个容器,值通常为css选择器字符串
    // el: '#root',
    // data 用于存储数组,数据供el所指定的容器去使用 
 /*    data: {
      name: '海绵宝宝',
      
    } */
    /* data的函数式写法 */
    data() {
      console.log("data中的this指向:",this)
      return {
        name: '海绵宝宝'
      }
    }
  });
  console.log(v);
  // 通过原型构造函数中的方法$mount绑定el
  v.$mount('#root')
</script>
</body>
</html>